<template>
  <div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visiblesbgbm1"
      :close-on-click-modal="false"
      width="800px"
      @close="onClose"
    >
      <el-tree
        class="tree"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>
            <svg-icon
              style="font-size: 18px"
              :icon-class="node.childNodes.length > 0 ? 'wenjianjia' : 'a-shebei'"
            ></svg-icon>
            {{ node.label }}
          </span>
        </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script>
import { QueryPageListAll } from '@/api/settings/renyuan'
export default {
  props: ['visiblesbgbm'],

  data() {
    return {
      queryForm: {
        pagenum: 1,
        pagesize: 20
      },
      total: 0,
      // 树状结构数据
      data: [],
      // 树状结构显示修改
      defaultProps: {
        children: 'children',
        label: 'orgname'
      },
      tableData: [],
      visiblesbgbm1: this.visiblesbgbm,
      title: '部门选择'
    }
  },
  // 这里用watch方法来监听父组件传过来的值，来实现实时更新
  watch: {
    visiblesbgbm(val) {
      // message即为父组件的值，val参数为值
      this.visiblesbgbm1 = val // 将父组件的值赋给childrenMessage 子组件的值
    }
  },
  created() {
    this.onSearchAll()
  },
  methods: {
    // 获取树结构所有数据
    async onSearchAll() {
      const { content } = await QueryPageListAll({})

      var res = []
      content.forEach(item => {
        if (item.showname != null) {
          res.push(item)
        }
      })
      this.datas = res
      const result = this.turnData(content, '0')
      this.data = result
      console.log(this.datas)
    },
    // 树状结构数据转换
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.parentid == pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    // 点击树状结构
    async handleNodeClick(data, index, event) {
      this.loading = true
      console.log(data)
      this.$emit('onChoosebgbm', data)
      this.$emit('fatherbgbu')
      this.loading = false
    },
    // 点击关闭给父组件传值
    onClose() {
      this.$emit('fatherbgbu')
    }
  }
}
</script>

<style></style>
